<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登录</title>
	<link rel="stylesheet" href="./layui.css"  media="all">
</head>
<body>
	<div id="app" class="container">
		<div class="body">
			<div style="width: 40%; display: flex;flex-direction: column; height: 50%;">
				<div style="color: #3573f4;font-size: 18px;margin-bottom:20px ;">洗丫丫</div>
				<div style="font-size: 24px;font-weight: bold;">洗衣服务系统平台</div>
			</div>
			<div class="loginForm">
				<div style="font-size: 16px;font-weight: bold;margin-bottom: 30px;">{{type === 3 ?'重置密码':'登录洗丫丫洗衣服务系统平台'}}</div>
				<form class="layui-form" action="form" style="width: 80%;" v-show="type === 1">
					<div class="layui-form-item">
					    <select class="layui-select" v-model="loginType" name="loginType" lay-verify="required" placeholder="请选择登录平台" lay-filter="select">
					      <option value="super">总后台</option>
					      <option value="agent">代理商后台</option>
					      <option value="factory">洗衣工厂后台</option>
					      <option value="store">洗衣店后台</option>
					      <option value="outlets">收衣网点后台</option>
					    </select>
					</div>
					<div class="layui-form-item">
					    <input type="text" v-model="phone" name="phone" required lay-verify="required" placeholder="请输入您的账号或手机号" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-item">
					    <input type="password" v-model="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>
				</form>
				<div class="layui-form" style="width: 80%;" v-show="type === 2">
					<div class="layui-form-item">
					    <select class="layui-select" v-model="loginType" name="loginType" lay-verify="required" placeholder="请选择登录平台">
					      <option value="super">总后台</option>
					      <option value="agent">代理商后台</option>
					      <option value="factory">洗衣工厂后台</option>
					      <option value="store">洗衣店后台</option>
					      <option value="outlets">收衣网点后台</option>
					    </select>
					</div>
					<div class="layui-form-item">
					    <input type="text" v-model="phone" name="phone" required lay-verify="required" placeholder="请输入您的账号或手机号" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-item" style="display: flex;align-items: center;">
					    <input v-model="checkCode" name="checkCode" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
						<button class="layui-btn" style="width: 150px;font-size: 12px;padding: 0;margin-left: 10px;" @click.stop="getCheckCode">{{time >0 ? time+'s':'获取验证码'}}</button>
					</div>
				</div>
				<div class="layui-form" style="width: 80%;" v-show="type === 3">
					<div class="layui-form-item">
					    <input type="text" v-model="phone" :disabled="!showPhone" name="phone" required lay-verify="required" placeholder="请输入你的登录手机号" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-item" style="display: flex;align-items: center;">
					    <input v-model="checkCode" name="checkCode" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
						<button class="layui-btn" style="width: 150px;font-size: 12px;padding: 0;margin-left: 10px;" @click.stop="getCheckCode">{{time >0 ? time+'s':'获取验证码'}}</button>
					</div>
					<div class="layui-form-item">
					    <input type="password" v-model="password" name="password" required lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-item">
					    <input type="password" v-model="configPassword" name="configPassword" required lay-verify="required" placeholder="请确认新密码" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" style="width: 80%">
				    <button class="layui-btn" @click.stop="login" v-if="type !== 3">登录</button>
					<button class="layui-btn" @click.stop="resetPass" v-else>确认</button>
				</div>
				<div style="width: 80%;text-align: right;font-size: 12px;">
					<span style="cursor: pointer;" @click="changeType">{{type === 2 ?'账号登录':'短信验证码登录'}}</span>
					<span style="margin-left: 5px;cursor: pointer;" @click="resetPassword">忘记密码</span>
				</div>
			</div>
		</div>
		<div class="footer">
			<p class="item">
				<span>关于我们</span>
				<span>联系我们</span>
				<span>法律声明</span>
				<span>隐私政策</span>
			</p>
			<p style="margin: 15px 0;">© 2016-现在 洗丫丫有限公司  版权所有  增值电信业务经营许可证：浙B2-20160869</p>
			<p>浙公网安备 33010602010281号</p>
		</div>
	</div>
</body>
<script src="./layui.all.js"></script>
<script src="./vue.min.js"></script>
<script src="./jquery.min.js"></script>
<script>
	var vapp = new Vue({
		el : '#app',
		data:{
			loginType:'super',
			type: 1,
			phone:'',
			password:'',
			configPassword:'',
			checkCode:'',
			time:0,
			showPhone: true,
		},
		created() {
			let phone = this.getUrlParam('phone')
			if(phone){
				this.showPhone = false
				this.phone = phone
				this.type = 3
			}
		},
		mounted() {
			layui.use('form', function(){
			  var form = layui.form;
			  form.render('select');
			  form.on('select(select)', function(data){
				vapp.$data.loginType = data.value
			  });
			});	
		},
		methods:{
			getUrlParam(name) {
			    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
			    if (r != null) return decodeURIComponent(r[2]);
			    return null; //返回参数值
			},
			resetPassword() {
				vapp.$data.phone = ''
				vapp.$data.password = ''
				vapp.$data.checkCode = ''
				this.type = 3
			},
			changeType() {
				vapp.$data.phone = ''
				vapp.$data.password = ''
				vapp.$data.checkCode = ''
				this.type = this.type === 1?2:1
			},
			resetPass () {
				if(this.configPassword !== this.password) return layer.msg('两次密码输入不一致');
				$.ajax({
					url: 'https://xyy.macoolliving.com/api/admin/auth/resetPassword', // 替换为你的API端点
					type: 'POST',
					data:{
						phone: this.phone,
						password: this.password,
						checkCode: this.checkCode
					},
					dataType: 'json',
					success: function(res) {
						layer.msg(res.message);
						if(res.code === 200) {
							vapp.$data.phone = ''
							vapp.$data.password = ''
							vapp.$data.checkCode = ''
							vapp.$data.type = 1
						}
					},
				});
			},
			countdown() {
			  var seconds = 60;
			  // 创建一个定时器，每秒更新秒数
			  var timer = setInterval(function() {
			    seconds--; // 减少秒数
			    if (seconds < 0) {
					vapp.$data.time = 0
			      clearInterval(timer); // 时间到，清除定时器
			    }
			    // 输出剩余时间
			    vapp.$data.time = seconds
			  }, 1000);
			},
			getCheckCode() {
				if(this.time !== 0)  return layer.msg('请稍后再试');
				let that = this
				if(!this.phone) return layer.msg('请输入手机号');
				$.ajax({
					url: 'https://xyy.macoolliving.com/api/admin/auth/sendCheckCode', // 替换为你的API端点
					type: 'POST',
					data:{
						phone: this.phone
					},
					dataType: 'json',
					success: function(res) {
						if(res.code === 200) {
							that.countdown()
						}
						layer.msg(res.message);
					},
				});
			},
			login () {
				let that = this
				$.ajax({
					url: 'https://xyy.macoolliving.com/api/admin/auth/login', // 替换为你的API端点
					type: 'POST',
					data:{
						username: this.phone,
						password: this.password,
						loginType: this.type,
						checkCode: this.checkCode,
						plamtType: this.loginType
					},
					dataType: 'json',
					success: function(res) {
						if(res.code === 200) {
							if(res.data.is_first === 0) {
								layer.msg('登录成功，请先重置密码');
								vapp.$data.phone = res.data.phone
								vapp.$data.showPhone = false
								vapp.$data.type = 3
							}else{
								let token = res.data.token
								localStorage.setItem(that.loginType+'-token',token)
								window.location.href = '/'+that.loginType+'/index.html'
							}
						}else{
							layer.msg(res.message);
						}
					},
				});
			},
		}
	})
</script>
<style>
	.layui-input{
		margin-left: 0!important;
	}
	.layui-this{
		background-color: #3573f4!important;
		color: #fff!important;
	}
	.layui-btn{
		width: 100%;
		border-radius: 8px;
		color: #fff;
		background-color: #3573f4;
	}
	html,body{
		height: 100%;
		margin: 0;
	}
	.container{
		height: 100%;
	}
	.body{
		background-color: #3573f424;
		height: 85%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.loginForm{
		width: 400px;
		height: 400px;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 6px 6px 12px 4px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.footer{
		height: 130px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 12px;
	}
	.item span{
		margin-right: 8px;
	}
</style>
</html>